<template>
    <div class="content" >
        <div class="login">
            <div class="left"></div>
            <div class="right">
                <h3 class="tips">自然人代开后台管理系统</h3>
                <el-form ref="ruleFormRef" :model="form" :rules="rules" class="form-box" size="large" @submit.native.prevent>
                    <el-form-item prop="mobile">
                        <el-input @keyup.native.enter="login(ruleFormRef)" v-model="form.mobile" placeholder="手机号码" maxlength="11" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input @keyup.native.enter="login(ruleFormRef)" v-model="form.password" type="password" placeholder="登录密码" maxlength="12" show-password />
                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="loading" style="width: 100%" @click="login(ruleFormRef)">登 录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
    <div>
        <img src="../../assets/imgs/my.jpg" alt="1213">
    </div>
</template>

<script setup>
import {reactive, ref, onMounted} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import api from './api/index'

import hexMD5 from '@/utils/md5.min.js'
import {successDeal, setStore, removeStore} from '@/utils/utils'

onMounted(() => {
    removeStore('YX_BACK_ZRRDK_USERINFO')
})
const $router = useRouter()
const form = reactive({
    mobile: '13890665501',
    password: '123456',
})

const loading = ref(false)
const rules = reactive({
    mobile: [
        {required: true, message: '请输入手机号码', trigger: 'blur'},
        {
            pattern: /^1[3|4|5|6|7|8|9]\d{9}$/,
            message: '手机号格式错误',
            trigger: 'change',
        },
    ],
    password: [
        {required: true, message: '请输入登录密码', trigger: 'blur'},
        {min: 6, max: 12, message: '请输入6-12位密码', trigger: 'blur'},
    ],
})
const ruleFormRef = ref()
const login = (formEl) => {
    formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            let json = {
                mobile: form.mobile,
                password: form.password,
            }
            api.login(json)
                .then((res) => {
                    setStore('YX_BACK_ZRRDK_USERINFO', res.data)
                    $router.push('/userMangment')
                    loading.value = false
                })
                .catch((err) => {
                    loading.value = false
                })
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>

<style lang="scss" scoped>
.content {
    width: 100%;
    height: 100%;
    background: url('../../assets/imgs/bg1.jpg') no-repeat;
    background-size: cover;
}
.tips {
    text-align: center;
    font-size: 30px;
    color: #fff;
}
.form-box {
    margin-top: 40px;
}
.login {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    display: flex;
    background-color: #164b33;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 5px 4px 13px -3px rgba(0, 0, 0, 0.3);
}
.right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}
</style>
